<template>
	<view class="app app-bg">
		<statusText :info="info" :timestamp="timestamp" @end="end"></statusText>
		<view class="title" style="margin-top: 14rpx">服务地址</view>
		<view class="address">
			<image class="icon" src="@/static/icon/icon_order_location.png"></image>
			<view class="info">
				<text class="text" v-if="vk.pubfn.isNotNull(info.address)">
					{{ info.address.name + " " + info.address.mobile }}
				</text>
				<text>{{ info.address.formatted_address }}</text>
			</view>
		</view>
		<view class="time">
			<text class="text">服务时间</text>
			<text>{{ info.time }}</text>
		</view>
		<view class="title">服务项目</view>
		<view class="main">
			<view class="shifu">
				<image class="avatar" :src="info.shifu_avatar"></image>
				<text class="text">{{ info.shifu_name }}</text>
				<view class="btn" @tap="report">投诉</view>
			</view>
			<view class="project">
				<text class="tit">{{ info.project_title }}</text>
				<view class="item">
					<text>时长: {{ info.project_time }}分钟 x{{ info.buyNum }}</text>
					<text class="normal">￥{{ money(info.project_pay) }}</text>
				</view>
				<view class="item">
					<text>出行方式：</text>
					<text class="normal">{{ way }}</text>
				</view>
				<view class="item">
					<text>出行距离：</text>
					<text class="normal">
						{{ info.way_distance ? info.way_distance.toFixed(1) : "--" }}km
					</text>
				</view>
				<view class="item">
					<text>出行费用：</text>
					<text class="normal">￥{{ money(info.way_pay) }}</text>
				</view>
				<view class="item" v-if="info.coupon_discount">
					<text>优惠券抵扣：</text>
					<text class="dis">-￥{{ money(info.coupon_discount) }}</text>
				</view>
			</view>
		</view>
		<view class="total">
			<text>总服务时长: {{ info.project_time * info.buyNum || "--" }}分钟</text>
			<text class="text">合计: ￥{{ money(info.real_pay) }}</text>
		</view>
		<block v-if="info.remark">
			<view class="title">备注</view>
			<view class="remark">{{ info.remark }}</view>
		</block>
		<view class="title">订单信息</view>
		<view class="order">
			<view class="item">
				<text class="text">订单编号</text>
				<text>{{ info.order_number }}</text>
				<view class="btn" @tap="copy">复制</view>
			</view>
			<view class="item">
				<text class="text">下单时间</text>
				<text>{{ vk.pubfn.timeFormat(info._add_time, "yyyy-MM-dd hh:mm") }}</text>
			</view>
			<view class="item" v-if="info.pay_status">
				<text class="text">支付时间</text>
				<text>{{ vk.pubfn.timeFormat(info.pay_time, "yyyy-MM-dd hh:mm") }}</text>
			</view>
			<view class="item" v-if="info.pay_status">
				<text class="text">支付方式</text>
				<text>{{ pay }}</text>
			</view>
		</view>
		<block v-if="info.certify">
			<view class="title">开始服务凭证</view>
			<view class="box">
				<u-image
					v-for="(item, index) in info.certify"
					style="margin: 0 12rpx 12rpx 0"
					border-radius="12"
					height="160"
					width="160"
					:src="item"
					:key="index"
					@tap="preview(index, info.certify)"
				></u-image>
			</view>
		</block>
		<block v-if="info.sign">
			<view class="title">确认签字</view>
			<view class="box" style="padding: 14rpx 0 22rpx">
				<u-image border-radius="12" height="240" width="100%" :src="info.sign"></u-image>
			</view>
		</block>
		<btns :info="info" @cancel="cancel" @confirm="confirm" @appraise="appraise"></btns>
		<u-modal
			content="取消后支付金额将返还至账户余额，确认取消么？"
			show-cancel-button
			v-model="show"
			@confirm="cancelOrder"
		></u-modal>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
import statusText from "./components/status-text"
import btns from "./components/btns"

export default {
	components: { statusText, btns },
	data() {
		return {
			// 订单信息
			oid: "",
			info: { address: {} },
			timestamp: 999999,
			// 选项
			wayArr: { bus: "公交", taxi: "出租" },
			payArr: { wxpay: "微信", alipay: "支付宝", balance: "余额" },

			show: false,
			flag: false
		}
	},
	onLoad(opt) {
		this.oid = opt._id
		this.flag = true
		uni.$on("paySuccess", () => {
			this.init()
		})
		this.init()
	},
	computed: {
		way() {
			if (!this.info.way) return "--"
			return this.wayArr[this.info.way]
		},
		pay() {
			if (!this.info.pay_type) return "--"
			return this.payArr[this.info.pay_type]
		}
	},
	methods: {
		// 金额规范
		money(val) {
			if (val === undefined) return "--"
			return vk.pubfn.priceFilter(val)
		},
		// 初始化
		init() {
			vk.callFunction({
				url: "client/order.queryMyServiceOrderDetail",
				title: "获取中...",
				data: { oid: this.oid }
			}).then(res => {
				if (res.info.status === 0) {
					let now = new Date().getTime()
					this.timestamp = res.info.util_time - now > 0 ? res.info.util_time - now : 0
				}
				this.info = res.info
			})
		},
		// 复制
		copy() {
			uni.setClipboardData({
				data: this.info.order_number,
				success: () => {
					vk.toast("复制成功")
				}
			})
		},
		// 取消订单
		cancel(type) {
			if (type === 1) {
				this.show = true
			} else {
				this.flag = false
				vk.navigateTo(`./cancel?id=${this.oid}`)
			}
		},
		cancelOrder() {
			vk.callFunction({
				url: "client/order.cancelMyOrder",
				title: "取消中...",
				data: { oid: this.oid }
			}).then(() => {
				vk.toast("取消成功")
				this.flag = false
				this.init()
			})
		},
		// 前往支付
		payJump() {
			this.flag = false
			vk.navigateTo(`/pages/project/order-pay?id=${this.oid}`)
		},
		// 倒计时结束
		end() {
			vk.callFunction({
				url: "client/order.cancelMyOrderDelay",
				title: "取消中...",
				data: { oid: this.oid }
			}).then(() => {
				vk.toast("已自动取消")
				this.flag = false
				this.init()
			})
		},
		// 确认完成签字
		confirm() {
			this.flag = false
			vk.navigateTo(`./confirm?id=${this.oid}`)
		},
		// 预览
		preview(index, item) {
			uni.previewImage({ current: index, urls: item })
		},
		// 评价
		appraise() {
			this.flag = false
			vk.navigateTo(`./appraise?id=${this.oid}`)
		},
		// 投诉
		report() {
			this.flag = false
			vk.navigateTo(`/pages/user/setting/report?id=${this.oid}`)
		}
	},
	onUnload() {
		uni.$off("paySuccess")
	},
	onBackPress() {
		if (this.flag) {
			uni.$emit("noFresh")
		} else {
			this.flag = true
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 28rpx 20rpx 148rpx;
}

.title {
	display: flex;
	align-items: center;
	border-radius: 12rpx 12rpx 0 0;
	background-color: #fff;
	padding: 30rpx 0 10rpx;
	margin-top: 4rpx;
	font-weight: bold;
	&::before {
		content: "";
		width: 10rpx;
		height: 30rpx;
		display: inline-block;
		background-color: #3ab54a;
		margin-right: 10rpx;
	}
}

.address {
	display: flex;
	align-items: center;
	border-radius: 0 0 12rpx 12rpx;
	background-color: #fff;
	padding: 10rpx 30rpx 30rpx;
	.icon {
		width: 52rpx;
		height: 52rpx;
	}
	.info {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		color: #999999;
		margin-left: 22rpx;
		.text {
			font-size: 28rpx;
			color: #212121;
			line-height: 50rpx;
		}
	}
}

.time {
	border-radius: 12rpx;
	background-color: #fff;
	margin: 20rpx 0;
	padding: 30rpx 20rpx 30rpx 0;
	display: flex;
	align-items: center;
	&::before {
		content: "";
		width: 10rpx;
		height: 30rpx;
		display: inline-block;
		background-color: #3ab54a;
		margin-right: 10rpx;
	}
	.text {
		font-weight: bold;
		flex: 1;
	}
}

.main {
	background-color: #fff;
	padding: 10rpx 20rpx 30rpx;
	border-bottom: 2rpx dashed #cccccc;
	.shifu {
		background-color: #f4f6f9;
		border-radius: 12rpx;
		padding: 24rpx 20rpx;
		display: flex;
		align-items: center;
		.avatar {
			width: 108rpx;
			height: 108rpx;
			background-color: #999999;
			border-radius: 50%;
		}
		.text {
			flex: 1;
			padding-left: 24rpx;
			font-size: 26rpx;
		}
		.text::before {
			content: "服务技师：";
			color: #999999;
		}
		.btn {
			color: #3ab54a;
			font-size: 24rpx;
			padding: 6rpx 36rpx;
			border: 2rpx solid #3ab54a;
			border-radius: 100rpx;
		}
	}
	.project {
		background-color: #f4f6f9;
		border-radius: 12rpx;
		padding: 26rpx 20rpx 10rpx;
		margin-top: 20rpx;
		.tit {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			display: block;
			padding-bottom: 8rpx;
		}
		.item {
			color: #999999;
			font-size: 26rpx;
			padding: 16rpx 0 6rpx 20rpx;
			display: flex;
			justify-content: space-between;
		}
		.normal {
			color: #333333;
		}
		.dis {
			color: #ff0000;
		}
	}
}

.total {
	background-color: #fff;
	border-radius: 0 0 12rpx 12rpx;
	padding: 24rpx;
	display: flex;
	font-weight: bold;
	justify-content: space-between;
	font-size: 26rpx;
	margin-bottom: 20rpx;
	.text {
		color: #ff0000;
	}
}

.remark {
	background-color: #fff;
	border-radius: 0 0 12rpx 12rpx;
	padding: 10rpx 24rpx 30rpx;
	font-size: 26rpx;
	margin-bottom: 20rpx;
}

.order {
	background-color: #fff;
	border-radius: 0 0 12rpx 12rpx;
	font-size: 26rpx;
	padding-top: 14rpx;
	margin-bottom: 20rpx;
	.item {
		padding: 26rpx 24rpx;
		border-top: 2rpx solid #f0f0f0;
		display: flex;
		align-items: center;
		.text {
			margin-right: 36rpx;
			color: #999999;
		}
		.btn {
			color: #3ab54a;
			font-size: 24rpx;
			padding: 4rpx 28rpx;
			border: 2rpx solid #3ab54a;
			border-radius: 100rpx;
			margin-left: auto;
		}
	}
}

.box {
	background-color: #fff;
	border-radius: 0 0 12rpx 12rpx;
	padding: 14rpx 0 24rpx 16rpx;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
}
</style>
